<!--
  *@Description : In user setting edit
  *@author 萧红
  *@date 2020-05-16 09:55
  *@LastEditTime 2020-05-16 09:55
  *@LastEdititors
-->
<template>
    <div id="userList">
      <el-button  type="primary" style="position: absolute; bottom: 20px;left: 0px" @click="isShowAddDialog=true">添加用户</el-button>
      <el-table :data="tableData" :height="$inerHeight-130" stripe border cell-class-name="cell" header-row-class-name="head" class="mytable"
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column prop="img_url" label="图像" width="100">
          <template slot-scope="scope">
            <img style="margin: 0px 2px" :src="scope.row.img_url" width="50" height="50"/>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="150">
          <template slot-scope="scope">
            <!--<span>{{scope.row.username}}</span>-->
            <el-link type="primary" @click="showInfoDrawer(scope.$index)">{{scope.row.username}}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="100" sortable :filters="[{text: '男', value: 1}, {text: '女', value: 0}]" :filter-method="filterHandler">
          <template slot-scope="scope">
            <i class="el-icon-female" v-if="scope.row.sex === 0" style="color:red"></i>
            <i class="el-icon-male" v-else style="color:blue"></i>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号码" width="120">
        </el-table-column>
        <el-table-column prop="sign" label="签名">
        </el-table-column>
        <el-table-column prop="cos_number" label="cos号">
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" sortable>
        </el-table-column>
        <el-table-column prop="update_time" label="更新时间" sortable>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="editUser(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delUser(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <Page :total="total" @pageChange="pageChange"></Page>
      </div>
      <!--用户详情抽屉-->
      <el-drawer :visible.sync="isShowInfoDrawer" size="50%">
        <div slot="title" style="position: relative">
          <div class="editDrawer-title">用户详情</div>
          <el-button type="primary" plain icon="el-icon-edit" class="editDrawer-edit-btn">编辑</el-button>
        </div>
        <div class="top" :style="{backgroundImage: `url(${infoData.bgimg_url})`}">
          <div class="left">
            <el-image
              style="width: 100px; height: 100px"
              :src="infoData.img_url"
              :fit="'fill'">
            </el-image>
          </div>
          <div class="right">
            <div>
              <span class="head-name">用户名：</span>
              <span class="head-value">{{infoData.username}}</span>
            </div>
            <div>
              <span class="head-name">性别：</span>
              <span class="head-value">{{infoData.sex?'男':'女'}}</span>
            </div>
            <div>
              <span class="head-name">地址：</span>
              <span class="head-value">{{infoData.province + ' '+infoData.city}}</span>
            </div>
          </div>
        </div>
        <el-tabs v-model="activeName" @tab-click="tabClick" class="myTabs">
          <el-tab-pane label="基本信息" name="first">
            <el-row class="row">
              <el-col :span="8">
                <span class="label-name">用户id:</span>
                <span class="label-value">{{infoData.id}}</span>
              </el-col>
              <el-col :span="8">
                <span class="label-name">用户名:</span>
                <span class="label-value">{{infoData.username}}</span>
              </el-col>
              <el-col :span="8">
                <span class="label-name">性别:</span>
                <span class="label-value">{{infoData.sex?'男':'女'}}</span>
              </el-col>
            </el-row>
            <el-row class="row">
              <el-col :span="8">
                <span class="label-name">手机号:</span>
                <span class="label-value">{{infoData.phone}}</span>
              </el-col>
              <el-col :span="8">
                <span class="label-name">密码:</span>
                <span class="label-value">{{infoData.passwd}}</span>
              </el-col>
              <el-col :span="8">
                <span class="label-name">签名:</span>
                <span class="label-value">{{infoData.sign}}</span>
              </el-col>
            </el-row>
            <el-row class="row">
              <el-col :span="8" style="display: flex;align-items: center">
                <span class="label-name">图像地址:&ensp;&ensp;</span>
                <span class="label-value">
                  <el-image
                    style="width: 75px; height: 75px"
                    :src="infoData.img_url"
                    :preview-src-list="imgs">
                  </el-image>
                </span>
              </el-col>
              <el-col :span="8" style="display: flex;align-items: center">
                <span class="label-name">背景图:&ensp;&ensp;</span>
                <el-image
                  style="width: 75px; height: 75px"
                  :src="infoData.bgimg_url"
                  :preview-src-list="imgs">
                </el-image>
              </el-col>
              <el-col :span="8" style="line-height: 75px">
                <span class="label-name">cos号:</span>
                <span class="label-value">{{infoData.cos_number}}</span>
              </el-col>
            </el-row>
            <el-row class="row">
              <el-col :span="8">
                <span class="label-name">地址:</span>
                <span class="label-value">{{infoData.province + '  ' + infoData.city}}</span>
              </el-col>
              <el-col :span="8">
                <span class="label-name">创建时间:</span>
                <span class="label-value">{{infoData.create_time}}</span>
              </el-col>
              <el-col :span="8">
                <span class="label-name">更新时间:</span>
                <span class="label-value">{{infoData.update_time}}</span>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="订单信息" name="second">

          </el-tab-pane>
          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>
      </el-drawer>
      <!--添加用户对话框-->
      <el-dialog title="添加用户" :visible.sync="isShowAddDialog" width="30%" class="add-dialog">
        <div>
          <input type="file" style="display: none" id="avatar" accept="image/*" @change="selectedAvatar">
          <!--选择图像-->
          <div  @click="selectAvatar">
            <el-avatar :size="100" fit="fill" :src="avatarUrl" style="margin-bottom: 10px" class="avatar"></el-avatar>
          </div>
          <el-input v-model="username" placeholder="请输入昵称" clearable prefix-icon="el-icon-user" style="margin-bottom: 10px" maxlength="10"></el-input>
          <el-input v-model="mobile" placeholder="请输入手机号" clearable prefix-icon="el-icon-phone" style="margin-bottom: 10px" maxlength="11"></el-input>
          <el-input v-model="password" placeholder="请输入密码" clearable prefix-icon="el-icon-lock" style="margin-bottom: 10px" show-password maxlength="16"></el-input>
          <el-radio v-model="sex" label="0">萌妹子</el-radio>
          <el-radio v-model="sex" label="1">帅汉子</el-radio>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShowAddDialog = false">取 消</el-button>
          <el-button type="primary" @click="addUser">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
import Page from './Page'
export default {
  name: 'UserList',
  components: {Page},
  data () {
    return {
      tableData: [], // 表格数据
      page: 1, // 分页
      total: 0, // 数据条数
      loading: false, // 是否正在加载数据
      isShowInfoDrawer: false, // 是否显示详情抽屉
      isShowAddDialog: false, // 是否显示新增用户对话框
      infoData: {}, // 详情数据
      activeName: 'first', // 第一个标签
      imgs: [], // 保存图像和背景图地址，使用于详情图单击时会放大
      // 一下属性只用于新增用户对话框
      username: '', // 用户名
      mobile: '', // 手机号
      password: '', // 密码
      sex: '0', // 性别，0女，1男
      avatarFile: null, // 选择的图像文件
      avatarUrl: '../../../static/default_avatar.png' // 图像url，默认本项目的默认图像
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    // 初始化添加用户时的数据
    initAddUserData () {
      this.username = '' // 用户名
      this.mobile = ''// 手机号
      this.password = '' // 密码
      this.sex = '0' // 性别，0女，1男
      this.avatarFile = null // 选择的图像文件
      this.avatarUrl = '../../../static/default_avatar.png' // 图像url，默认本项目的默认图像
    },
    getData () {
      this.loading = true
      this.apis.getAllUser({page: this.page}).then(res => {
        if (res.code === 200) {
          this.tableData = res.data
          this.loading = false
          this.$message.success(res.msg)
        }
      })
      this.apis.getCountUser().then(res => {
        if (res.code === 200) {
          this.total = res.data.count
          // console.log(this.total)
        }
      })
    },
    pageChange (page) {
      this.page = page
      this.getData()
    },
    // 筛选时调用的方法
    filterHandler (value, row, column) {
      // console.log(value)  value为当前筛选的值
      // console.log(row) row为行数据对象
      // console.log(column)
      const property = column['property'] // 取得此列的健民，这里为key
      return row[property] === value
    },
    editUser (index, data) {},
    delUser (index, data) {
      let params = {
        userId: data.id
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.apis.delUserById(params).then(res => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            setTimeout(this.getData(this.page), 500)
          }
        })
      })
    },
    showInfoDrawer (index) {
      // console.log(index)
      this.imgs = []
      this.isShowInfoDrawer = true
      this.infoData = this.tableData[index]
      this.imgs.push(this.infoData.img_url)
      this.imgs.push(this.infoData.bgimg_url)
    },
    tabClick: function (tab, event) {
      if (tab.name === 'first') {
        console.log('基本信息')
      } else if (tab.name === 'second') {
        console.log('订单信息')
      }
    },
    // 单击图像时调用的方法
    selectAvatar () {
      console.log(111)
      let avatar = document.querySelector('#avatar')
      avatar.click()
    },
    // 选择完图像单击确定调用的方法
    selectedAvatar () {
      let file = event.currentTarget.files[0]
      this.avatarFile = file
      this.avatarUrl = URL.createObjectURL(file)
    },
    // 添加用户调用的方法
    addUser () {
      if (this.username === '') {
        this.$message.warning('请输入用户名')
        return false
      } else if (this.mobile === '') {
        this.$message.warning('请输入手机号')
        return false
      } else if (this.password === '') {
        this.$message.warning('请输入密码')
        return false
      } else {
        // 判断手机号的正则表达式
        let regMob = /^1[0-9]{10}$/
        if (this.username.length > 10) {
          this.$message.warning('用户名长度不能超过10')
          return false
        }
        if (!regMob.test(this.mobile)) {
          this.mobile = ''
          this.$message.warning('手机号不合法')
          return false
        } else if (this.password.length < 6) {
          this.password = ''
          this.$message.warning('密码长度必须大于6')
          return false
        }
        // 走到这里代表上面的验证规则都通过了
        let formData = new FormData()
        formData.append('file[]', this.avatarFile)
        formData.append('phone', this.$md5(this.mobile))
        formData.append('password', this.$md5(this.password))
        formData.append('username', this.username)
        formData.append('sex', this.sex)
        let url = '/user/regist'
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        this.$post(url, formData, config).then((res) => {
          if (res.code === 200) {
            this.$message.success('添加用户成功')
            this.initAddUserData()
            setTimeout(() => {
              this.isShowAddDialog = false
              this.getData()
            }, 1000)
          } else if (res.code === -1) {
            this.$toast(res.msg)
          }
        })
      }
    }
  }
}
</script>

<style lang="stylus">
  #userList
  {
    position relative
    .mytable
    {
      .head
      {
        color:black
        text-align center
        font-size 16px
      }
      .cell
      {
        text-align center
      }
    }
    .editDrawer-title
    {
      color: black
      font-weight bolder
    }
    .editDrawer-edit-btn
    {
      position absolute
      top: 50%
      transform translateY(-50%)
      right: 20px
    }
    .top
    {
      width 100%
      padding 20px 0px
      display flex
      background-size cover
      background-position center center
      background-repeat no-repeat
      .left
      {
        width 15%
        height 100px
        padding 0px 20px
        text-align left
        img
        {
          width 100%
          height 100%
          border-radius 50%
        }
      }
      .right
      {
        width 70%
        height 100px
        padding 20px 0px
        box-sizing border-box
        text-align left
        display flex
        flex-flow column nowrap
        justify-content space-between
        color snow
      }
    }
    .myTabs
    {
      #tab-first
      {
        padding-left 20px
        text-align center
      }
      .row
      {
        padding 0px 20px
        text-align left
        margin 20px 0px
      }
    }
    .add-dialog
    {
      .avatar
      {
        img
        {
          width 100%
          height 100%
        }
      }
    }
  }
</style>
